@extends('admin::public.base')

@section('content')
<div class="layui-card">
    <div class="layui-header">
        <div class="layui-card-header layuiadmin-card-header-auto">
            @can('system.role.create')
            <a class="layui-btn" href="{{ route('admin.role.create') }}">添 加</a>
            @endcan
        </div>
    </div>
    <table id="dataTable" class="layui-hide" lay-filter="dataTable"></table>
    <script type="text/html" id="options">
        @can('system.role.edit')
        <a class="normal" lay-event="edit">编辑</a>
        @endcan
        @if(auth('admin')->user()->can('system.role.permission'))
        <a class="normal" lay-event="permission">权限</a>
        @endif
        @if(auth('admin')->user()->can('system.role.destroy'))
        <a class="normal" lay-event="del">删除</a>
        @endif
    </script>
</div>
@endsection

@section('script')
@can('system.role')
<script>
    layui.use(['layer', 'table', 'form'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var param = {!!$param!!};
        var page = param.page ? param.page : 1;
        var limit = param.limit ? param.limit : 10;
        //用户表格初始化
        var dataTable = table.render({
            elem: '#dataTable',
            url: "{{ route('admin.role.getList') }}",
            skin: 'line',
            cellMinWidth: 150,
            text: { //自定义文本，此处用法--》当返回数据为空时的异常提示
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            },
            page: {
                curr: page,
                limit: limit
            } //开启分页
            ,
            cols: [
                [ //表头
                    { checkbox: true }, { field: 'name', align: 'center', title: '名称' }, { field: 'display_name', align: 'center', title: '显示名称' }, { field: 'created_at', align: 'center', title: '创建时间' }, { field: 'updated_at', align: 'center', title: '更新时间' }, { title: '操作', align: 'center', toolbar: '#options' }
                ]
            ]
        });
        //监听复选框
        table.on('checkbox(dataTable)', function (obj) {
            if (obj.checked) {
                if (obj.type == "all") {
                    $('.layui-table').find('tbody tr').attr({ "style": "background:#f5fbff" });
                } else {
                    var index = obj.data.LAY_TABLE_INDEX;
                    $('.layui-table').find('tbody tr').eq(index).attr({ "style": "background:#f5fbff" });
                }
            } else {
                if (obj.type == "all") {
                    $('.layui-table').find('tbody tr').attr({ "style": "background:#ffffff" });
                } else {
                    var index = obj.data.LAY_TABLE_INDEX;
                    $('.layui-table').find('tbody tr').eq(index).attr({ "style": "background:#ffffff" });
                }
            }
        });
        //监听工具条
        table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data,
                layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') {
                layer.confirm('您确认要删除吗？', { icon: 3, title: '温馨提示', skin: 'layui-skin' }, function (index) {
                    $.post("{{ route('admin.role.destroy') }}", { _method: 'delete', ids: [data.id] }, function (data) {
                        if (data.code == 1) {
                            layer.msg(data.msg, {
                                time: 2000
                            }, function () {
                                reload();
                            })
                        } else {
                            layer.msg(data.msg);
                        }
                        layer.close(index);
                    });
                });
            } else if (layEvent === 'edit') {
                location.href = '/admin/role/' + data.id + '/edit';
            } else if (layEvent === 'permission') {
                location.href = '/admin/role/' + data.id + '/permission';
            }
        });

        function reload() {
            dataTable.reload({
                page: { curr: 1 }
            })
        }
    })
</script>
@endcan
@endsection
